<template>
  <div class="base-info">
    <div class="title">基础信息</div>
    <a-row :gutter="8">
      <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
        <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
          <template v-if="item.name === 'createTime'">
            <div v-if="passData[item.name]">{{ dayjs(Number(passData[item.name])).format("YYYY-MM-DD HH:mm:ss") }}</div>
            <div v-else>-</div>
          </template>
          <template v-else-if="item.name === 'shipmentSquaresNumber'"> {{ passData[item.name] }}m³</template>
          <template v-else>{{ passData[item.name] }}</template>
        </a-form-item>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { formItemColumn } from "../details/data";
import dayjs from "dayjs";
const props = withDefaults(
  defineProps<{
    passData: Base.GeneraDataType;
  }>(),
  {}
);

const { passData } = toRefs(props);
</script>
<style lang="stylus" scoped>
.title{
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
}

.base-info{
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 4px 0px #ccc;
  font-weight: 600;
  .emphasis-item {
    color: #fe8100;
    > :deep(.ant-form-item-label){
      >label{
        color: #fe8100;
      }
    }
  }
  :deep(.ant-form-item){
    margin-bottom: 8px;
  }
}
</style>
